import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, StatusBar, TouchableOpacity } from "react-native";
import { Icon } from "@rneui/themed";
import FrozenWallet from "./components/FrozenWallet";
import TransferLimit from "./components/TransferLimit";
import WhiteList from "./components/WhiteList";
import CommonContext from "@/utils/createContext";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const AssetsSettings = (props) => {

    const [tabIndex, setTabIndex] = useState(0);
    const [coinType, setCoinType] = useState('');

    useEffect(() => {
        let params = props.route.params
        if (params && params.coinType) {
            setCoinType(params.coinType)
        }
    }, [])

    const handlePressBack = () => {
        props.navigation.goBack()
    }

    return (
        <View style={styles.container}>
            {/* headerContent */}
            <View>
                <StatusBar backgroundColor='#5B6DFD' barStyle='light-content' />
                <View style={styles.titleContent}>
                    <View style={{ flexDirection: 'row', width: width, alignItems: 'center', justifyContent: 'space-between', marginTop: 13 * ratio }}>
                        <View style={{ flex: 2 }}>
                            <Icon type="antdesign" name="left" size={16} color='#FFFFFF' style={{ marginLeft: 15 * ratio }}
                                onPress={handlePressBack} />
                        </View>
                        <View style={{ flex: 6, alignItems: 'center' }}>
                            <Text style={styles.title1}>Assets Settings</Text>
                        </View>
                        <View style={{ flex: 2 }}></View>
                    </View>
                </View>
            </View>
            {/* bodyContent */}
            <View style={{ flex: 1, flexDirection: 'row' }}>
                <View style={{ flex: 2, backgroundColor: '#FFFFFF' }}>
                    <TouchableOpacity onPress={() => setTabIndex(0)}
                        style={{ ...styles.tabItemContent, backgroundColor: tabIndex == 0 ? '#F5F6FA' : '#FFFFFF' }}>
                        <Text style={styles.title2}>Transfer</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => setTabIndex(1)}
                        style={{ ...styles.tabItemContent, backgroundColor: tabIndex == 1 ? '#F5F6FA' : '#FFFFFF' }}>
                        <Text style={styles.title2}>White list</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => setTabIndex(2)}
                        style={{ ...styles.tabItemContent, backgroundColor: tabIndex == 2 ? '#F5F6FA' : '#FFFFFF' }}>
                        <Text style={styles.title2}>Frozen</Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flex: 8 }}>
                    {tabIndex == 0 &&
                        <CommonContext.Provider value={{ coinType, handlePressBack }}>
                            <TransferLimit />
                        </CommonContext.Provider>}
                    {tabIndex == 1 &&
                        <CommonContext.Provider value={{ handlePressBack }}>
                            <WhiteList />
                        </CommonContext.Provider>}
                    {tabIndex == 2 && <FrozenWallet />}
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F6FA'
    },
    titleContent: {
        width: width,
        height: 54 * ratio,
        backgroundColor: '#5B6DFD'
    },
    tabItemContent: {
        width: '100%',
        height: 57 * ratio,
        justifyContent: 'center',
        alignItems: 'center'
    },
    title1: {
        fontSize: 15,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#F9F9F9',
        lineHeight: 20
    },
    title2: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#2A2A2A',
        lineHeight: 20
    }
})
export default AssetsSettings